﻿@page "/heatmap-chart/palette-mode"

@using Syncfusion.Blazor.HeatMap
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@using Syncfusion.Blazor.Buttons;
@using MSComponents = Microsoft.AspNetCore.Components
@using sf_blazor_heatmapdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the energy consumption in trillion British thermal units (btu) by the various public sectors in US government over the years. The data label is disabled in this sample, the Tooltip displays the data point values.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to change the Palette type between <code>Fixed</code> and <code>Gradient</code> types in Heatmap. The palette type can be defined using the <code>Type</code> property in <code>PaletteSettings</code> . Legend is enabled in this example, when the palette mode is changed, the Legend Type will be automatically switched between Gradient Legend and list type Legend.</p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="row">
        <SfHeatMap DataSource="@DataSource">
            <HeatMapTitleSettings Text="U.S. Government Energy Consumption by Agency (Trillion Btu)">
                <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
            </HeatMapTitleSettings>
            <HeatMapXAxis Labels="@XLabels"
                          LabelRotation="45"
                          LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None">
            </HeatMapXAxis>
            <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
            <HeatMapPaletteSettings Type="@PalatteType">
                <HeatMapPalettes>
                    <HeatMapPalette Value="4.3" Color="#FFFFDA"></HeatMapPalette>
                    <HeatMapPalette Value="7" Color="#EDF8B6"></HeatMapPalette>
                    <HeatMapPalette Value="9" Color="#CAE8B4"></HeatMapPalette>
                    <HeatMapPalette Value="15" Color="#78D1BD"></HeatMapPalette>
                    <HeatMapPalette Value="25" Color="#208FC6"></HeatMapPalette>
                    <HeatMapPalette Value="30" Color="#253494"></HeatMapPalette>
                    <HeatMapPalette Value="32" Color="#081D58"></HeatMapPalette>
                </HeatMapPalettes>
            </HeatMapPaletteSettings>
            <HeatMapCellSettings ShowLabel="false">
                <HeatMapCellBorder Width="0"></HeatMapCellBorder>
            </HeatMapCellSettings>
            <HeatMapLegendSettings Visible="false">
            </HeatMapLegendSettings>
        </SfHeatMap>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div><h5>Properties</h5></div>
    <table id="property" title="Properties" style="width: 100%">
        <tbody>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Palette Type:</div>
                </td>
                <td style="width: 40%;">
                    <div class="row" style="padding-top: 10px;">
                        <SfRadioButton Label="Fixed" Name="PaletteType" Value="Fixed" @bind-Checked="@Type" ValueChange="@ValueChange" TChecked="string">
                        </SfRadioButton>
                    </div>
                    <div class="row" style="padding-top: 10px;">
                        <SfRadioButton Label="Gradient" Name="PaletteType" Value="Gradient" @bind-Checked="@Type" ValueChange="@ValueChange" TChecked="string"></SfRadioButton>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code{
    PaletteType PalatteType = PaletteType.Fixed;
    string Type = "Fixed";
    string[] XLabels = new string[] { "China", "India", "USA", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Mexico" };
    string[] YLabels = new string[] { "1965-1970", "1970-1975", "1975-1980", "1980-1985", "1985-1990", "1990-1995", "1995-2000", "2000-2005", "2005-2010", "2010-2015" };
    double[,] DataSource = HeatMapData.GetPaletteData();
    public void ValueChange(Syncfusion.Blazor.Buttons.ChangeArgs<string> args)
    {
        if ((string)args.Value == "Fixed")
        {
            PalatteType = PaletteType.Fixed;
            Type = "Fixed";
        }
        else
        {
            PalatteType = PaletteType.Gradient;
            Type = "Gradient";
        }
    }
}
